<template>
    <div>
        <Button-group>
            <i-button type="primary" @click="modal = true">添加新闻</i-button>
            <i-button type="error" @click="removes">删除多个</i-button>  
        </Button-group>
        <Input v-model="data.name">
            <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>
        <Modal
        v-model="modal"
        title="添加新闻"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="标题" prop="title">
                <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
            </FormItem>
            <FormItem label="作者" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="邮箱" prop="mail">
                <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
            </FormItem>
            <FormItem label="内容" prop="desc">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </FormItem>
            <FormItem label="ID" v-show="a" prop="id">
                <Input v-model="formValidate.id" ></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>

    </Modal>
        <Table border :columns="columns" :data="list" @on-selection-change="onSelectionChange"></Table>
        <Page :total="data.total" @on-change="onChangePage" @on-selection-change="onPageSizeChange" size="small" show-elevator show-sizer></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                ids:[],
                a:false,
                formValidate: {
                    id:'',
                    title:'',
                    name: '',
                    mail: '',                   
                    desc: ''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    
                    desc: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                        { type: 'string', min: 20, message: '请输入不少于20字', trigger: 'blur' }
                    ]
                },
                modal: false,
                columns: [
                    {
                        type: 'selection',  
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '作者',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: 'Email',
                        key: 'mail'
                    },
                    {
                        title: '内容',
                        key: 'desc'
                    },
                    {
                        title: '时间',
                        key: 'date'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            
                                              this.$router.push(`/news/newsComment/${params.row._id}`);
                                              this.$emit('newsComment');
                                        }
                                    }
                                }, '查看评论'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                list:[],
                data: {
                    limit:10,
                    page:1,
                    total:10,
                    desc: '',
                }
                
            }
        },
        created(){
            this.getData();
        },
        methods: {
            search(){
                this.getData();
            },
            onSelectionChange(selection){
                if(selection && selection.length>0){
                    var ids = [];
                    for(let i=0;i<selection.length;i++){
                        ids.push(selection[i]._id);
                    }
                    this.ids = ids;
                }
            },
            removes(){
                this.$http({
                    method:'post',
                    url:'http://10.31.160.22:3000/news/data/removes',
                    data:{
                        ids: this.ids
                    }
                }).then(res=>{
                    this.getData();
                })
            },
            getData(){
                this.$http({
                    method:'post',
                    url:'http://10.31.160.22:3000/news/list',
                    data:this.data
                }).then(res=>{
                    this.list=res.data.docs;
                    this.data.total=res.data.total;
                })
            },
            show (params) {
                this.formValidate.id=params.row._id;
                this.formValidate.title=params.row.title;
                this.formValidate.name=params.row.name;
                this.formValidate.mail=params.row.mail;
                this.formValidate.desc=params.row.desc;
                this.a=true;
                this.modal=true

            },
            remove (params) {
                this.$Modal.confirm({
                    title: '确认对话框标题',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        this.$http({
                        method:'delete',
                        url:`http://10.31.160.22:3000/news/data/${params.row._id}`
                        }).then(res=>{
                             this.$Message.info('已删除');
                             this.getData();
                        })                      
                    },
                    onCancel: () => {
                        this.$Message.info('点击了取消');
                    }
                });
                
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            handleSubmit (name) {
                if(this.formValidate.id.length>0){
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$http({
                            method: 'put',
                            url:`http://10.31.160.22:3000/news/data/${this.formValidate.id}`,
                            data: this.formValidate
                            }).then(res=>{
                            this.getData();
                            this.$Message.success('提交成功!');
                            this.modal=false;
                            this.a=false

                            // 重置form表单内容为数据的初始值状态
                            // ********** 非常重要
                            Object.assign(this.$data.formValidate, 
                            this.$options.data().formValidate);
                            this.modal=false;
                            })
                        }else{
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }else{
                        this.$refs[name].validate((valid) => {
                            if (valid) {
                                this.$http({
                                method: 'post',
                                url:'http://10.31.160.22:3000/news/data',
                                data: this.formValidate
                                }).then(res=>{
                                this.getData();
                                this.$Message.success('提交成功!');

                                // 重置form表单内容为数据的初始值状态
                                // ********** 非常重要
                                Object.assign(this.$data.formValidate, 
                                this.$options.data().formValidate);
                                this.modal=false;
                                })
                            } else {
                                this.$Message.error('表单验证失败!');
                            }
                        })
                    }
                
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            onChangePage(page){
                this.data.page=page;
                this.$http({
                    method:'post',
                    url:'http://10.31.160.22:3000/news/list',
                    data:this.data
                }).then(res=>{
                    this.list=res.data.docs;
                    this.data.total=res.data.total;
                })
            },
            onPageSizeChange(pageSize){ 
                this.data.limit=pageSize;
                this.getData();
            },
        }
    }
</script>
